<template>
	<view class="container">
		<u-navbar :is-back="false" title="个人中心" :background="navbarBg" :border-bottom="false" title-color="#fff"></u-navbar>
		<view class="avatar-username-box">
			<!-- <button class="no-login" v-if="!isLogin" open-type="getUserInfo" @getuserinfo="login">点击一键登录</button> -->
			<view class="no-login" v-if="!isLogin" @tap="toLogin">点击一键登录</view>
			<block v-else>
				<u-avatar :src="userInfo.avatarUrl" size="large" mode="square"></u-avatar>
				<view class="username">
					<text>{{userInfo.nickName}}</text>
				</view>
			</block>
			<u-icon name="arrow-right" color="#fff" size="34"></u-icon>
		</view>
		
		<view class="menu-list">
			<u-cell-group :border="false">
				<u-cell-item icon="star-fill" title="我的收藏"></u-cell-item>
				<u-cell-item icon="question-circle-fill" title="意见反馈"></u-cell-item>
				<u-cell-item icon="setting-fill" title="设置"></u-cell-item>
				<u-cell-item icon="info-circle-fill" title="关于" :border-bottom="false"></u-cell-item>
			</u-cell-group>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navbarBg: { backgroundColor: "#2979ff" },
				userInfo: {
					avatarUrl: "",
					nickName: "" 
				},
				isLogin: false
			}
		},
		onLoad() {
			this.isLogin = this.vuex_isLogin;
			this.userInfo = this.vuex_userInfo;
		},
		methods: {
			login(e) {
				console.log(e.detail);
				if(e.detail.errMsg === "getUserInfo:fail auth deny") return;
				this.$u.vuex('vuex_isLogin', true);
				this.$u.vuex('vuex_userInfo', e.detail.userInfo);
				this.isLogin = this.vuex_isLogin;
				this.userInfo = this.vuex_userInfo;
			},
			toLogin() {
				uni.navigateTo({
					url: './login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-username-box {
		height: 180rpx;
		padding: 0 40rpx;
		padding-bottom: 40rpx;
		background-color: $u-type-primary;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: -2rpx;
	}
	
	.no-login {
		color: #FFFFFF;
		font-size: 38rpx;
	}
	
	button.no-login {
		position: relative;
		display: block;
		margin: 0;
		padding-left: 14px;
		padding-right: 14px;
		box-sizing: border-box;
		font-size: 38rpx;
		text-align: center;
		text-decoration: none;
		line-height: 2.55555556;
		border-radius: 5px;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		cursor: pointer;
		color: #FFFFFF;
		background-color: inherit;
	}
	button.no-login::after {
		display: none;
	}
	
	.username {
		margin: 0 auto 10rpx 20rpx;
		font-size: 38rpx;
		color: #FFFFFF;
	}
	
	.menu-list {
		margin: 40rpx;
		background-color: #FFFFFF;
	}
	
	// /deep/ .menu-list .u-cell:first-child::after {
	// 	border-top-left-radius: 10%;
	// 	border-top-right-radius: 10%;
	// }
	
	// /deep/ .menu-list .u-cell:last-child::after {
	// 	border-bottom-left-radius: 10%;
	// 	border-bottom-right-radius: 10%;
	// }
</style>
